<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>menu</title>
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all" />
    <link rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}" media="all" />
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all" />
    <style>
      .layui-btn:not(.layui-btn-lg):not(.layui-btn-sm):not(.layui-btn-xs) {
        height: 34px;
        line-height: 34px;
        padding: 0 8px;
      }
    </style>
  </head>
  <body>
    <div class="layuimini-container">
      <div class="layuimini-main">
        <!--        <blockquote class="layui-elem-quote">-->
        <!--            Layui的树形表格treeTable，支持异步加载(懒加载)、复选框联动、折叠状态记忆。<br>-->
        <!--            <a href="https://gitee.com/whvse/treetable-lay" target="_blank" class="layui-btn layui-btn-danger">treetable-lay</a>-->
        <!--        </blockquote>-->
        <div>
          <div class="layui-btn-group">
            <button class="layui-btn" id="btn-expand">全部展开</button>
            <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
            <button class="layui-btn layui-btn-warm" id="addChild">新增</button>
          </div>
          <table id="dept-table" class="layui-table" lay-filter="dept-table"></table>
        </div>
      </div>
    </div>
    <input id="btn-refresh" style="display: none" />
    <!-- 操作列 -->
    <script type="text/html" id="dept-state">
      <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script id="dept-status" type="text/html">
      <input type="checkbox" name="enable" value="{{d.deptId}}" lay-skin="switch" lay-text="正常|停用"
      lay-filter="dept-enable" {{ d.status == '0' ? 'checked' : '' }}>
    </script>

    <script type="text/html" id="dept-type">
      {{#if (d.type == '0') { }}
      <span>部门</span>
      {{# }else if(d.type == '1'){ }}
      <span>分公司</span>
      {{# }else if(d.type == '2'){ }}
      <span>地区</span>
      {{# } }}
    </script>

    <script th:src="@{/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
    <script th:src="@{/js/lay-config.js?v=1.0.4}" charset="utf-8"></script>
    <script th:inline="none">
      layui.use(["table", "layer", "treetable"], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var treetable = layui.treetable;
        var form = layui.form;

        // 渲染表格
        var renderTable = function () {
          layer.load(2);
          treetable.render({
            treeColIndex: 2,
            treeSpid: 0,
            treeIdName: "deptId",
            treePidName: "parentId",
            elem: "#dept-table",
            url: "/sys-dept/query",
            page: false,
            cols: [
              [
                { type: "numbers" },
                { field: "deptId", width: 80, title: "部门id" },
                { field: "deptName", minWidth: 350, title: "部门名称" },
                {
                  field: "orderNum",
                  width: 80,
                  align: "center",
                  title: "排序号",
                },
                {
                  field: "status",
                  width: 120,
                  align: "center",
                  title: "部门状态",
                  templet: "#dept-status",
                },
                {
                  field: "type",
                  width: 80,
                  align: "center",
                  title: "部门类型",
                  templet: "#dept-type",
                },
                {
                  templet: "#dept-state",
                  width: 200,
                  align: "center",
                  title: "操作",
                },
              ],
            ],
            done: function () {
              layer.closeAll("loading");
            },
          });
        };
        renderTable();

        $("#btn-refresh").click(function () {
          renderTable();
        });

        $("#btn-expand").click(function () {
          treetable.expandAll("#dept-table");
        });

        $("#btn-fold").click(function () {
          treetable.foldAll("#dept-table");
        });
        $("#addChild").click(function () {
          var index = layer.open({
            title: "新增部门",
            type: 2,
            shade: 0.2,
            maxmin: true,
            shadeClose: false,
            area: ["80%", "80%"],
            content: "/page/dept/add.html",
          });
          $(window).on("resize", function () {
            layer.full(index);
          });
        });
        form.on("switch(dept-enable)", function (obj) {
          var id = this.value;
          var name = this.name;

          let reqData = {};
          reqData.deptId = id;
          reqData.status = 1;
          if (obj.elem.checked) {
            reqData.status = 0;
          }
          layer.confirm(
            "确认提交？",
            {
              btn: ["确定", "关闭"], //按钮
            },
            function (index) {
              $.ajax({
                url: "/sys-dept/enableDept",
                type: "post",
                async: false,
                data: JSON.stringify(reqData),
                contentType: "application/json",
                success: function (result) {
                  if (result.success) {
                    layer.msg(result.msg, { icon: 1, time: 1000 }, function () {});
                  } else {
                    let msgKey = obj.elem.checked ? "启用" : "关闭";
                    layer.msg(msgKey + "失败：" + result.msg, { icon: 2, time: 3000 });
                    obj.elem.checked = !obj.elem.checked;
                    form.render("checkbox");
                  }
                },
              });
            },
            function () {
              obj.elem.checked = !obj.elem.checked;
              form.render("checkbox");
            }
          );
        });

        //监听工具条
        table.on("tool(dept-table)", function (obj) {
          var data = obj.data;
          var layEvent = obj.event;
          var tableId = data["deptId"];
          console.log(obj);
          if (layEvent === "del") {
            layer.confirm("真的删除行 [ " + data.deptName + "] 么", function (index) {
              obj.del(); // 删除对应行（tr）的DOM结构
              // 向服务端发送删除指令
              $.ajax({
                url: "/sys-dept/" + tableId,
                type: "delete",
                async: false,
                success: function (result) {
                  if (result.success) {
                    layer.close(index);
                    $("#btn-refresh").click();
                  } else {
                    layer.msg(result.msg, { icon: 2, time: 1000 });
                  }
                },
              });
            });
          } else if (layEvent === "edit") {
            var index = layer.open({
              title: "修改部门",
              type: 2,
              shade: 0.2,
              maxmin: true,
              shadeClose: false,
              area: ["80%", "80%"],
              content: "/page/dept/edit.html",
              success: function (layero, index, that) {
                var iframe = window["layui-layer-iframe" + index];
                iframe.init(data);
              },
            });
            $(window).on("resize", function () {
              layer.full(index);
            });
          }
        });
      });
    </script>
  </body>
</html>
